jotai-derive-example

import { derive } from "jotai-derive";

import { Suspense, useCallback, useEffect } from "react";

import "./styles.css";

​

import { userAtom, UserRepo } from "./userAtom";

​

const uppercaseNameDeriveAtom = derive([userAtom], (user) =>

  user.name.toUpperCase()

);

​

function UserDisplayDerive() {

  const user = useAtomValue(userAtom);

  const uppercaseName = useAtomValue(uppercaseNameDeriveAtom);

​

  return (

    <div>

      <p>

        <strong>name</strong>: {uppercaseName}

      </p>

      <p>

        <strong>e-mail</strong>: {user.email}

      </p>

    </div>

  );

}

​

const uppercaseNameVanillaAtom = atom(async (get) => {

  const user = await get(userAtom);

  return user.name.toUpperCase();

});

​

function UserDisplayVanilla() {

  const user = useAtomValue(userAtom);

  const uppercaseName = useAtomValue(uppercaseNameVanillaAtom);

​

  return (

    <div>

      <p>

        <strong>name</strong>: {uppercaseName}

      </p>

      <p>

        <strong>e-mail</strong>: {user.email}

      </p>

    </div>

  );

}

​

let deriveSuspensions = 0;

let vanillaSuspensions = 0;

​

function syncView() {

  const deriveEl = document.getElementById("derive-suspensions");

  if (deriveEl) {

    deriveEl.innerText = `Suspensions: ${deriveSuspensions}`;

  }